@import "../utils/color";

.detail {
  position: absolute;
  left: 700px;
  width: 530px;

  &-tree {
    overflow: hidden;
    width: 100%;
    height: 550px;

    .detail-item {
      position: relative;
      width: 100%;
      height: 55px;
      margin-bottom: 10px;
      border-radius: 1px;
      background-color: rgba(255, 255, 255, 0.1);

      &-song {
        position: absolute;
        left: 0;
        width: 430px;
        height: 55px;
        border: 5px solid transparent;

        &.fe-cache {
          font-weight: bold;
          color: $primary;

          .detail-item-song-mv-img {
            background-image: image-url("icons/green_mv.png")
          }
        }

        &.fe-focus {
          font-weight: bold;
          color: $primary;
          border-color: $primary;

          .detail-item-song-mv-img {
            background-image: image-url("icons/green_mv.png")
          }
        }

        &-wrapper {
          line-height: 45px;
          position: absolute;
          left: 0;
          width: 365px;
          height: 45px;

          .marquee-truncate {
            font-size: 32px;
            z-index: 1;
            padding-left: 16px;
            text-align: left;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        &-mv {
          position: absolute;
          right: 8px;
          width: 40px;
          height: 100%;

          &-img {
            position: absolute;
            top: 50%;
            width: 40px;
            height: 40px;
            transform: translateY(-50%);
            background-image: image-url("icons/white_mv.png");
            background-repeat: no-repeat;
            background-size: 40px 40px;
          }
        }
      }

      &-icon {
        position: absolute;
        width: 40px;
        height: 100%;
      }

      &-pick {
        right: 56px;

        &-img {
          position: absolute;
          top: 50%;
          width: 40px;
          height: 40px;
          transform: translateY(-50%);
          background-repeat: no-repeat;
          background-size: 40px 40px;
        }

        .white-plus {
          background-image: image-url("icons/white_plus.png")
        }

        .green-minus {
          background-image: image-url("icons/green_minus.png")
        }

        &.fe-focus {
          transform: scale(1.35);
        }
      }

      &-fav {
        right: 8px;

        &-img {
          position: absolute;
          top: 50%;
          width: 40px;
          height: 40px;
          transform: translateY(-50%);
          background-repeat: no-repeat;
          background-size: 40px 40px;
        }

        .white-fav {
          background-image: image-url("icons/white_heart.png")
        }

        .green-fav {
          background-image: image-url("icons/green_heart.png")
        }

        &.fe-focus {
          transform: scale(1.35);
          border-radius: 1px;
        }
      }
    }
  }

  .detail-pager {
    font-size: 32px;
    line-height: 55px;
    position: absolute;
    top: 550px;
    width: 100%;
    height: 55px;
    text-align: center;
  }
}
